<template>
  <div class="app-container">
    <div class="panel">
      <el-form :model="formInline" label-width="20%" class="search-form">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="销售单号" size="small">
              <el-input
                v-model="formInline.user"
                placeholder="销售单号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="订单状态" size="small">
              <el-select
                v-model="formInline.options"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in formInline.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="选择物料" size="small">
              <el-select
                v-model="formInline.options"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in formInline.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="销售地区" size="small">
              <el-select
                v-model="formInline.options"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in formInline.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="销售时间" size="small">
              <el-date-picker
                v-model="formInline.value5"
                type="datetimerange"
                :picker-options="formInline.pickerOptions2"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd H:m:s"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item size="small" align="right">
              <el-button
                type="primary"
                icon="el-icon-search"
                class="search"
                @click="handleSearch"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" align="right">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              class="search"
              >修改</el-button
            >
            <el-button
              size="small"
              type="info"
              icon="el-icon-delete"
              @click="getRemoveEvent"
              class="search"
              >作废</el-button
            >
            <el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              class="search"
              >退货入库</el-button
            >
            <el-button
              type="success"
              size="small"
              icon="el-icon-plus"
              class="search"
              >添加出库</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-thumb"
              size="small"
              class="search"
              >手动抓取</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="source" v-loading="listLoading">
      <div class="tips">
        <span class="tips-item"
          >总数据：<span class="numbs">{{ pageForm.total }}</span
          >条</span
        >
        <span class="tips-item"
          >出库总量：<span class="numbs">{{ pageForm.totalOutbound }}</span
          >公斤/Kg</span
        >
        <span class="tips-item no-border"
          >总发货量：<span class="numbs">{{ pageForm.totalExpress }}</span
          >公斤/Kg</span
        >
      </div>
      <vxe-grid
        :data="list"
        border
        resizable
        highlight-hover-row
        show-overflow
        ref="xGrid"
        style="width: 100%"
        size="mini"
        :columns="columns"
        max-height="400"
      >
        <vxe-table-column title="操作" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-popover
              placement="top"
              width="160"
              trigger="click"
              v-model="scope.row.delPopover"
            >
              <p>确定删除此用户吗？</p>
              <div>
                <el-button
                  size="mini"
                  type="primary"
                  @click="scope.row.delPopover = false"
                  >取消</el-button
                >
                <el-button
                  size="mini"
                  type="warning"
                  @click="handleDelete(scope.$index, scope.row)"
                  >确定</el-button
                >
              </div>
              <el-button slot="reference" type="danger" size="mini"
                >删除</el-button
              >
            </el-popover>
          </template>
        </vxe-table-column>
      </vxe-grid>
      <vxe-pager
        class="margin20"
        background
        size="mini"
        :current-page.sync="pageForm.currentPage"
        :page-size.sync="pageForm.pageSize"
        :page-sizes="pageForm.pageSizes"
        :total="pageForm.total"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'NextJump',
          'Sizes',
          'FullJump',
          'Total'
        ]"
      >
      </vxe-pager>
    </div>
  </div>
</template>

<script>
import { getPostSaleList } from '@/api/sales'
import { parseTime } from '@/utils/index'
export default {
  name: 'postSale',
  data() {
    return {
      list: [],
      listLoading: true,
      formInline: {
        user: '',
        options: [
          {
            value: '选项1',
            label: '黄金糕'
          },
          {
            value: '选项2',
            label: '双皮奶'
          },
          {
            value: '选项3',
            label: '蚵仔煎'
          },
          {
            value: '选项4',
            label: '龙须面'
          },
          {
            value: '选项5',
            label: '北京烤鸭'
          }
        ],
        pickerOptions2: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }
          ]
        },
        value5: ''
      },
      columns: [
        { type: 'checkbox', width: 50, fixed: 'left' },
        { field: 'id', title: 'ID', width: 80, fixed: 'left' },
        { field: 'order_sn', title: '订单号', width: 240, fixed: 'left' },
        {
          field: 'order_time',
          title: '订单日期',
          width: 150,
          formatter: this.parseTime
        },
        { field: 'order_status', title: '单据状态', width: 280 },
        { field: 'type', title: '业务类型', width: 280 },
        { field: 'user_order_sn', title: '客户订单号', width: 280 },
        {
          field: 'sale_organization',
          title: '销售组织',
          width: 280,
          showOverflow: true
        },
        { field: 'order_from', title: '订单来源', width: 280 },
        { field: 'pay_type', title: '支付类型', width: 280 },
        { field: 'pay_sn', title: '支付单号', width: 280 },
        {
          field: 'advances_received',
          title: '已收预付款',
          width: 280,
          slots: {
            default: ({ row }) => {
              return [<span class='money'>￥ {row.advances_received}</span>]
            }
          }
        },
        { field: 'receive_address_province', title: '收货省份', width: 180 },
        { field: 'address', title: '收货地址', width: 380 },
        { field: 'material_code', title: '物料编号', width: 200 },
        { field: 'material_name', title: '物料名称', width: 280 },
        { field: 'material_spec', title: '物料规格', width: 150 },
        { field: 'unit', title: '计量单位', width: 150 },
        { field: 'num', title: '数量', width: 150 },
        {
          field: 'price',
          title: '单价',
          width: 150,
          slots: {
            default: ({ row }) => {
              return [<span class='money'>￥ {row.price}</span>]
            }
          }
        },
        {
          field: 'money',
          title: '金额',
          width: 150,
          slots: {
            default: ({ row }) => {
              return [<span class='money'>￥ {row.money}</span>]
            }
          }
        },
        {
          field: 'price_tax',
          title: '含税单价',
          width: 150,
          slots: {
            default: ({ row }) => {
              return [<span class='money'>￥ {row.price_tax}</span>]
            }
          }
        },
        {
          field: 'tax',
          title: '税额',
          width: 150,
          slots: {
            default: ({ row }) => {
              return [<span class='money'>￥ {row.tax}</span>]
            }
          }
        },
        {
          field: 'total_price',
          title: '价税合计',
          width: 150,
          slots: {
            default: ({ row }) => {
              return [<span class='money'>￥ {row.total_price}</span>]
            }
          }
        },
        {
          field: 'sand_goods_group',
          title: '发货组织',
          width: 280,
          showOverflow: true
        },
        {
          field: 'preferential_amount',
          title: '优惠金额',
          width: 150,
          slots: {
            default: ({ row }) => {
              return [<span class='money'>￥ {row.preferential_amount}</span>]
            }
          }
        },
        {
          field: 'final_amount',
          title: '优惠后金额',
          width: 150,
          slots: {
            default: ({ row }) => {
              return [<span class='money'>￥ {row.final_amount}</span>]
            }
          }
        },
        { field: 'deposit_business', title: '定金业务', width: 180 }
      ],
      pageForm: {
        totalOutbound: 342000,
        totalExpress: 14200,
        total: 0,
        pageSize: 1000,
        pageSizes: [100, 200, 300, 500, 1000],
        currentPage: 1
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getPostSaleList()
        .then((res) => {
          this.list = res.data
          this.pageForm.total = res.data.length
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    parseTime({ cellValue }) {
      console.log(cellValue)
      if (cellValue) {
        return parseTime(cellValue)
      } else {
        return '空'
      }
    },
    getRemoveEvent() {
      const grid = this.$refs.xGrid
      const list = grid.getCheckboxRecords() // 获取选中数据 Array
      console.log(list)
      grid.removeCheckboxRow()
      //   const removeRecords = grid.getRemoveRecords()
      //   this.$XModal.alert(removeRecords.length)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 分页事件
    handlePageSize({ page, size }) {
      console.log(page, size)
    },
    handleSearch() {
      console.log(this.formInline)
    }
  }
}
</script>

<style lang="scss" scoped>
.panel {
  padding: 24px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
  background-color: #f9fafc;
}
.source {
  padding: 24px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
  margin-top: 24px;
  .tips {
    padding: 0 0 15px;
    font-size: 12px;
    color: rgba($color: #000000, $alpha: 0.5);
    .tips-item {
      padding-right: 20px;
      padding-left: 20px;
      border-right: 1px solid #dcdfe6;
      .numbs {
        font-weight: 600;
        color: #f56c6c;
        font-size: 14px;
        padding: 0 5px 0 3px;
      }
    }
    .no-border {
      border: 0 !important;
    }
  }
  .margin20 {
    margin-top: 10px;
  }
}
.money {
  font-weight: bold;
}
.el-form-item {
  .el-input {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
  .el-date-editor {
    width: 100%;
  }
}
</style>
